@import url("../../styles/publicStyle.less");

.nav-container {
  .widthAndHeight(94%, 156px);
  position: absolute;
  left: 50%;
  top: 194px;
  transform: translateX(-50%);
  box-shadow: 0 0 15px 5px @AssistLightGrey;
  border-radius: 20px;
  background-color: @AssistBgWhite;
  z-index: 10;

  ul {
    .widthAndHeight(100%, 100%);
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    column-gap: 30px;
    padding: 0 20px;
    z-index: 11;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    &::-webkit-scrollbar {
      display: none;
    }
    li {
      width: auto;
      height: 100%;
      flex-shrink: 0;
      .nav-item-logo {
        .widthAndHeight(80px, 80px);
        margin: 16px auto 4px auto;

        img {
          .widthAndHeight(100%, 100%);
        }
      }

      .nav-item-text {
        .ListTitle();
        text-align: center;
      }

      .active-text {
        color: @AssistTextA;
      }
    }
  }
}
